<!doctype html>
<html>
<head>
	<meta charset="utf-8"><meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>选择目标院校</title>
	<link rel="stylesheet" type="text/css" href="../../lib/css/skin.css"/>
	<link rel="stylesheet" type="text/css" href="../../lib/css/mobiscroll.css"/>
</head>
<body>
<div id="root">
	<div class="app_warp">
		<div class="app_head">
			<span class="left back"></span>
			<span class="name">选择目标院校</span>
			<span class="right menu active"></span>
			<div id="targetschool_fix_menu" class="animated fadeInRight" style="display: none"></div>
		</div>
		<div class="targetschool_search_bar">
			<div class="inner_targetschool_search_bar">
				<input id="searchinput" type="text" placeholder="通过关键字筛选学校">
				<a href="javascript:;" class="search_btn" tapmode onclick="document.getElementById('searchinput').value='';findFun('')"></a>
			</div>
		</div>
		<div class="nocontent animated fadeInUp">
			<img src="../../lib/img/loading.gif" class="minimize" alt="">
			<div class="text minimize">
				准备数据
			</div>
		</div>
		<div id="targetschool_cont" class="app_main animated fadeInUp" style="display: none;"></div>
	</div>
</div>
<script id="targetschool_fix_menu_template" type="text/html">
	<% for(var menu in data){%>
	<a href="#<%:=menu%>">
		<%:=menu%>
	</a>
	<% } %>
</script>
<script id="targetschool_template" type="text/html">
	<% for(var i in data){%>
	<ul>
		<li class="province">
			<a class="name" name="<%:=i%>">
				<%:=i%>
			</a>
			<ul class="submenu">
				<% for(var j in data[i]){ var item = data[i][j]%>
				<li class="submenu_item" tapmode onclick="sendKeyWord('<%:=item.name%>',<%:=item.id%>)"><%:=item.name%></li>
				<% } %>
			</ul>
		</li>
	</ul>
	<% } %>
</script>
<script>
	var
		findding = false,
		sendKeyWord= function(key,id){
			api.execScript({
				name:api.pageParam.win,
				script:'setKeyWord("'+key+'",'+id+')'
			})
			_$.sleep(function(){
				api.closeWin();
			},500)
		},
		findFun = function(word){
			var _keyWord = _$.trim(word),
				_allItem = $('.submenu_item'),
				_allParent = $('.province'),
				_menua = $('#targetschool_fix_menu a');

			if(findding===true){
				_$.sleep(function(){
					findFun(_keyWord);
				},200);
				return;
			}
			_menua.removeClass('hide');
			if(_keyWord === '') {
				_allItem.map(function(i,j){
					var obj=$(j);
					obj.text(obj.text());
				})
				_allParent.removeClass('hide');
				_allItem.removeClass('hide');
				findding = false;
			} else {
				_allItem.map(function(i,j){
					var obj=$(j),
						dataArr = obj.text().split(_keyWord);
					if(dataArr.length>1){
						var text = dataArr.join('<span class="key">'+_keyWord+'</span>');
						obj.html(text).removeClass('hide');
					}else{
						obj.addClass('hide');
					}
				})
				_allParent.map(function(k,l){
					var obj=$(l);
					if(obj.find('li.hide').length === obj.find('li').length){
						obj.addClass('hide');
						_menua.eq(k).addClass('hide');
					}else{
						obj.removeClass('hide');
					}
				});
				findding = false;
			}
		},
		menuFun = function (act) {
			if (act === true) {
				$('#targetschool_fix_menu').removeClass('fadeOutRight').addClass('fadeInRight').show();
				$('.app_head .menu').removeClass('runing');
			} else {
				$('.app_head .menu').removeClass('active');
				$('#targetschool_fix_menu').removeClass('fadeInRight').addClass('fadeOutRight');
				_$.sleep(function(){
					$('#targetschool_fix_menu').hide();
					$('.app_head .menu').removeClass('runing');
				},550);
			}
		}, appready = function () {

			$('.targetschool_search_bar .search_btn').on('click', function () {
				$('#searchinput').val('');
			})

			_$.template('targetschool_template', {data: schoolData}, function (html) {

				$('#targetschool_cont').html(html);

				_$.template('targetschool_fix_menu_template', {data: schoolData}, function (html) {

					$('#targetschool_fix_menu').html(html).show();
					$('.inner_targetschool_search_bar input').on('focus', function () {
						menuFun(false);
					}).bind('input propertychange', function () {
						findFun($(this).val());
					});
					$('.app_head .menu').on('click', function () {
						var _self = $(this);
						if(_self.hasClass('runing')){
							return;
						}else{
							_self.toggleClass('active');
							_self.addClass('runing');
							if (_self.hasClass('active')) {
								menuFun(true);
							} else {
								menuFun(false);
							}
						}

					})
				})
				_$.sleep(function () {
					$('#targetschool_cont,.nocontent').toggle();
				}, 500);
			})

		};


</script>
<script src="../../lib/js/config.js"></script>
<script src="../../lib/js/schoolData.js"></script>
<script src="../../lib/js/jquery.js"></script>
<script src="../../lib/js/common.js"></script>
<script>
	//appready();
</script>
</body>
</html>